<template>
  <div class="about">
    <h1>本班考勤表记录</h1>
  </div>

  <table>
    <thead>
      <tr>

        <th>考勤时间</th>
        <th>课程</th>
        <th>任课老师</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in attendences">
        <td><a href="">{{ item.when }}</a></td>
        <td>{{ item.courseName }}</td>
        <td>{{ item.teacherName }}</td>
        <td>{{ item.state }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>

import { mapActions, mapState } from 'pinia'
import { useAttenderStore } from '../../stores/attender'
import _ from 'lodash'
export default {
  inject: ['axios'],

  methods: {
    ...mapActions(useAttenderStore, ['fetchAttendencesOfClazzId']),
  },

  async mounted() {
    let list = await this.fetchAttendencesOfClazzId();
    list = _.sortBy(list, item => -item.startFrom);
    list.forEach(item => item.when = `${String(item.startFrom).substring(0, 2)}学年${String(item.startFrom).substring(2, 4)}第${String(item.startFrom).substring(4, 6)}周星期${String(item.startFrom).substring(6, 7)}第${String(item.startFrom).substring(7, 9)}节共${item.hours}学时`);
    this.attendences = list;
  },

  data() {

    return {
      attendences: []//{when:}
    }
  },
}
</script>


<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
